<template>
    <div class="store-box">
        <div class="store-top-bar">
            <div class="top-bar__left" @click.stop="toHome">返回主页</div>
            <div class="top-bar__right">
                <el-button @click="submit_click">保存</el-button>
                <!-- 暂不用 -->
                <!-- <el-button color="#409eff" style="color: white">发布</el-button> -->
            </div>
        </div>
        <!-- left -->
        <div class="left-bar">
            <div class="left-bar__one">
                <div class="left-bar__one-icon left-bar__active">
                    <el-icon size="18px">
                        <brush-filled />
                    </el-icon>
                    <p>装修</p>
                </div>
            </div>
            <div class="left-bar__help">
                <el-tooltip effect="light" content="帮助中心" placement="right-start">
                    <el-icon color="#c8c9cd" size="20px">
                        <question-filled />
                    </el-icon>
                </el-tooltip>
            </div>
        </div>
        <div class="letf-sub-bar">
            <div class="sub-bar__item" v-for="(item, pindex) in bars" :key="pindex" @click.stop="handleSub(item, pindex)">
                <div :class="[cur == pindex ? 'bar-active' : '', 'sub-bar__tab']">
                    <el-icon color="#969799" class="bar-icon">
                        <caret-right />
                    </el-icon>
                    <span class="sub-bar__tab-name">{{ item.text }}</span>
                </div>
                <div class="sub-list">
                    <el-collapse-transition>
                        <div class="sub-list__view" v-show="item.is_select">
                            <draggable
                                class="sub-list__view"
                                :list="item.lists"
                                data-box="left"
                                item-key="type_name"
                                :group="{ name: 'assembly', pull: 'clone', put: false }"
                                :move="onLeftMove"
                            >
                                <template #item="{ element }">
                                    <div class="sub-list__item" :data-id="element.id" :data-type_name="element.type_name">
                                        <i class="i-icon" :style="{ backgroundImage: element.img }"></i>
                                        <div class="sub-list__item-text">{{ element.text }}</div>
                                    </div>
                                </template>
                            </draggable>
                        </div>
                    </el-collapse-transition>
                </div>
            </div>
        </div>
        <!-- body -->
        <div class="store-body">
            <div class="store-body-page">
                <div
                    v-for="(item, index) in data.setTypeArr"
                    :key="index"
                    class="store-body__option store-body__option"
                    :class="index == data.setTypeIdx ? 'store-body__option-active' : ''"
                    @click="data.setTypeIdx = index"
                >
                    <el-icon size="14px">
                        <document v-if="index == 0" />
                        <More v-if="index == 1" />
                        <Setting v-if="index == 2" />
                    </el-icon>
                    <span>{{ item }}</span>
                </div>
            </div>
            <!-- body context -->
            <div class="store-body__cont">
                <div class="content" :style="{ background: pageData.style.background }">
                    <!-- 顶部导航 -->
                    <div :class="[data.setTypeIdx == 1 ? 'item-sel' : '', 'head-cont']" @click="data.setTypeIdx = 1">
                        <custom-head :pageData="pageData" />
                    </div>

                    <draggable
                        :list="pageData.body"
                        class="content-deco"
                        item-key="type_name"
                        ghost-class="ghost"
                        group="assembly"
                        animation="200"
                        @change="item_change"
                        :style="{ paddingTop: pageData.navBar.hidden ? '64px' : '0' }"
                    >
                        <template #item="{ element, index }">
                            <div
                                style="position: relative"
                                :class="data.setTypeIdx == 2 && index == data.itemIdx ? 'item-sel' : ''"
                                @click="item_click(index, element)"
                            >
                                <div
                                    :style="{
                                        padding: `${element.rpxStyle['margin-top']}px ${element.rpxStyle['margin-left']}px ${element.rpxStyle['margin-bottom']}px ${element.rpxStyle['margin-left']}px`,
                                    }"
                                >
                                    <!-- 轮播图 -->
                                    <Swiper v-if="element.type_name == 'swiper'" :data="element" @change="changeSwiper" />
                                    <!-- 图文导航 -->
                                    <Grid v-else-if="element.type_name == 'grid'" :data="element" />

                                    <!-- 通知 -->
                                    <Notice v-else-if="element.type_name == 'notice'" :data="element" />
                                    <!-- 门店列表 -->
                                    <ShopList v-else-if="element.type_name == 'shopList'" :data="element" />
                                    <!-- 商品搜索 -->
                                    <Search v-else-if="element.type_name == 'search'" :data="element" />
                                    <!-- 图片广告 -->
                                    <ImageAd v-else-if="element.type_name == 'img_ad'" :data="element" />
                                    <!-- 商品列表和分组 -->
                                    <GoodList v-else-if="element.type_name == 'pdcList' || element.type_name == 'pdcGroup'" :data="element" />
                                    <!-- 辅助分割 -->
                                    <AuxilDivision v-else-if="element.type_name == 'auxiliary_division'" :data="element" />
                                    <!-- 实时交易 -->
                                    <RealtimeDeal v-else-if="element.type_name == 'real_time_deal'" :data="element" />
                                    <!-- 交易场次 -->
                                    <TradeSession v-else-if="element.type_name == 'trade_session'" :data="element" />
                                    <!-- 标题文本 -->
                                    <Title v-else-if="element.type_name == 'title'" :data="element" />
                                    <!-- 标签商品 -->
                                    <TagGoods v-else-if="element.type_name == 'tagGood'" :data="element" />
                                    <!-- 秒杀专区 -->
                                    <Skill v-else-if="element.type_name == 'skill'" :data="element" />
                                    <!-- 视频容器 -->
                                    <HomeVideo v-else-if="element.type_name == 'video'" :data="element" />

                                    <!-- 容器 -->
                                    <!-- <ContainerBox v-else-if="element.type_name == 'box'" :data="element" /> -->
                                    <div v-else>{{ element }}</div>
                                </div>
                                <div class="tool-btn-con cls-center cls-column" v-if="index == data.itemIdx">
                                    <el-icon color="#979797" :size="20" @click="del_item(index)" title="删除">
                                        <Delete />
                                    </el-icon>
                                </div>
                            </div>
                        </template>
                    </draggable>
                </div>
                <!-- footer -->
                <div class="store-footer">
                    <div class="copyright">
                        <div class="ft-copyright" @click="toWebsite">
                            <img :src="a3" alt="花数云" />
                            <p>花数云提供技术支持</p>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <!-- right 组件设置 -->
        <div class="right-editor">
            <!-- 页面设置 -->
            <body-set v-if="data.setTypeIdx == 0" :pageData="pageData" />
            <!-- 顶部导航设置 -->
            <nav-bar-set v-else-if="data.setTypeIdx == 1" :pageData="pageData" />
            <!-- 轮播图设置 -->
            <swiper-set v-else-if="curItem.type_name == 'swiper'" :data="curItem" />
            <!-- 图文导航 -->
            <grid-set v-else-if="curItem.type_name == 'grid'" :data="curItem" />
            <!-- 公告通知 -->
            <set-notice v-else-if="curItem.type_name == 'notice'" :data="curItem" />
            <!-- 商品-->
            <set-pdc-list v-else-if="curItem.type_name == 'pdcList'" :data="curItem" />
            <!-- 商品分组-->
            <set-pdc-group v-else-if="curItem.type_name == 'pdcGroup'" :data="curItem" />
            <!-- 门店列表 -->
            <set-shop-list v-else-if="curItem.type_name == 'shopList'" :data="curItem" />
            <!-- 商品搜索 -->
            <set-search v-else-if="curItem.type_name == 'search'" :data="curItem" />
            <!-- 图片广告 -->
            <set-image-ad v-else-if="curItem.type_name == 'img_ad'" :data="curItem" />
            <!-- 辅助分割 -->
            <set-aux-division v-else-if="curItem.type_name == 'auxiliary_division'" :data="curItem" />
            <!-- 实时交易 -->
            <set-realtime v-else-if="curItem.type_name == 'real_time_deal'" :data="curItem" />
            <!-- 交易场次 -->
            <set-trade-session v-else-if="curItem.type_name == 'trade_session'" :data="curItem" />
            <!-- 标题文本 -->
            <set-title v-else-if="curItem.type_name == 'title'" :data="curItem" />
            <!-- 标签商品 -->
            <set-tag-goods v-else-if="curItem.type_name == 'tagGood'" :data="curItem" />
            <!-- 秒杀专区 -->
            <set-skill v-else-if="curItem.type_name == 'skill'" :data="curItem" />
            <!-- 视频容器 -->
            <set-video v-else-if="curItem.type_name == 'video'" :data="curItem" />

            <!-- 容器 -->
            <!-- <set-container v-else-if="curItem.type_name == 'box'" :data="curItem" /> -->
        </div>
    </div>
</template>

<script setup>
import { getCurrentInstance, ref, reactive, toRefs, onMounted, onBeforeUnmount } from "vue"
import { BrushFilled, QuestionFilled, CaretRight, Document, Delete, More, Setting } from "@element-plus/icons-vue"

import { useRouter, useRoute } from "vue-router"
import draggable from "vuedraggable"

// 图标
import i1 from "@images/i1.png" // 标题文本
import i2 from "@images/i2.png" // 轮播图
import i3 from "@images/i3.png" // 商品
import i4 from "@images/i4.png" // 图片广告
import i5 from "@images/i5.png" // 图文导航
import i6 from "@images/i6.png" // 商品搜索
import i7 from "@images/i7.png" // 公告通知
// import i8 from "@images/i8.png" // 优惠券
import i9 from "@images/i9.png" // 秒杀
// import i10 from "@images/i10.png" // 限时折扣
import i11 from "@images/i11.png" // 视频
// import i12 from "@images/i12.png" // Tabs标签
import i13 from "@images/i13.png" // 商品分组
import i15 from "@images/i15.png" // 辅助分割
import i16 from "@images/i16.png" // 实时成交
import i17 from "@images/i17.png" // 交易场次
import i18 from "@images/i18.png" // 标签商品
import i19 from "@images/i19.png" // 门店列表

// import i14 from "@images/i14.png" // 容器
import a3 from "@images/logo.png"

// 组件
import Grid from "@components/design/grid.vue"
import Swiper from "@components/design/swiper.vue"
import Notice from "@components/design/notice.vue"
import CustomHead from "@components/design/custom-head.vue"
import ShopList from "@components/design/shop-list.vue"
import Search from "@components/design/search.vue"
import ImageAd from "@components/design/image-ad.vue"
import GoodList from "@components/design/good-list.vue"
import AuxilDivision from "@components/design/auxil-division.vue"
import RealtimeDeal from "@components/design/realtime-deal.vue"
import TradeSession from "@components/design/trade-session.vue"
import Title from "@components/design/title.vue"
import TagGoods from "@components/design/tag-goods.vue"
import Skill from "@components/design/skill.vue"
import HomeVideo from "@components/design/home-video.vue"
// import ContainerBox from "@components/design/container-box.vue"

// 右侧组件设置
import NavBarSet from "@components/rightSetup/set-navbar.vue"
import BodySet from "@components/rightSetup/set-body.vue"
import SwiperSet from "@components/rightSetup/set-swiper.vue"
import SetPdcList from "@components/rightSetup/set-pdcList.vue"
import GridSet from "@components/rightSetup/set-grid.vue"
import SetPdcGroup from "@components/rightSetup/set-pdcGroup.vue"
import SetShopList from "@components/rightSetup/set-shopList.vue"
import SetNotice from "@components/rightSetup/set-notice.vue"
import SetSearch from "@components/rightSetup/set-search.vue"
import SetImageAd from "@components/rightSetup/set-image-ad.vue"
import SetAuxDivision from "@components/rightSetup/set-aux-division.vue"
import SetRealtime from "@components/rightSetup/set-realtime.vue"
import SetTradeSession from "@components/rightSetup/set-trade-session.vue"
import SetTitle from "@components/rightSetup/set-title.vue"
import SetTagGoods from "@components/rightSetup/set-tag-goods.vue"
import SetSkill from "@components/rightSetup/set-skill.vue"
import SetVideo from "@components/rightSetup/set-video.vue"
// import SetContainer from "@components/rightSetup/set-container.vue"

const router = useRouter()
const route = useRoute()
const { proxy } = getCurrentInstance()

/**组件数据 */
const data = reactive({
    bars: [
        {
            is_select: true,
            text: "基础组件",
            /** 可用组件 */
            lists: [],
            /** 所有组件 */
            listAll: [
                {
                    // 图文导航
                    id: 1,
                    img: "url(" + i5 + ")",
                    type_name: "grid",
                    text: "图文导航",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                        "padding-bottom": 0,
                        "padding-top": 0,
                        "padding-left": 0,
                        "padding-right": 0,
                        "img-size": 70,
                        "border-radius": 0,
                        "title-top": 0,
                        "title-bottom": 0,
                    },
                    /**普通样式，可直接转字符串给前端使用 */
                    style: {
                        background: "#fff",
                        color: "#333",
                    },
                    /**前端所需要的所有数据 */
                    data: {
                        /**可给前端使用的样式 */
                        style: "",
                        /** 外边框样式 */
                        conStyle: "",
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [
                            { title: "导航1", url: "", page_id: "", pageTitle: "" },
                            { title: "导航2", url: "", page_id: "", pageTitle: "" },
                            { title: "导航3", url: "", page_id: "", pageTitle: "" },
                            { title: "导航4", url: "", page_id: "", pageTitle: "" },
                        ],
                    },
                },
                {
                    // 轮播图
                    id: 2,
                    img: "url(" + i2 + ")",
                    type_name: "swiper",
                    text: "轮播图",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        /**高度 */
                        height: 240,
                        "border-radius": 0,
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                    },
                    style: {},
                    data: {
                        interval: 3000,
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [],
                    },
                },
                {
                    // 商品列表
                    id: 3,
                    img: "url(" + i3 + ")",
                    type_name: "pdcList",
                    text: "商品列表",
                    rpxStyle: {
                        "margin-left": 14,
                        "margin-right": 14,
                        "margin-bottom": 14,
                        "margin-top": 0,
                    },
                    style: {
                        styleType: 1, // 0 一行一个，1一行两个
                        titleMore: 1, // 1是默认一行展示，2是两行超出隐藏
                        weight: 500, // 加粗
                        showBuy: true, // 是否显示右下角购买按钮
                        showSupp: true, // 是否显示供应商信息
                        price_color: "#0ac393",
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        ids: [], // 商品ID
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                sale_rate: 0,
                            },
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                day_count: 1,
                                sale_rate: 0,
                                collected: 0,
                            },
                        ],
                    },
                },
                {
                    // 商品分组
                    id: 4,
                    img: "url(" + i13 + ")",
                    type_name: "pdcGroup",
                    text: "商品分组",
                    rpxStyle: {
                        "margin-left": 14,
                        "margin-right": 14,
                        "margin-bottom": 14,
                        "margin-top": 0,
                    },
                    style: {
                        styleType: 1, // 0 一行一个，1一行两个
                        titleMore: 1, // 1是默认一行展示，2是两行超出隐藏
                        weight: 500, // 加粗
                        showBuy: true, // 是否显示右下角购买按钮
                        showSupp: true, // 是否显示供应商信息
                        tabInitColor: "#646566", // 标签文字默认颜色
                        tabActiveColor: "#333", // 标签文字选中颜色
                        tabLineColor: "#ee0a24", // 标签底部条默认颜色
                        price_color: "#0ac393",
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "/api/product/index",
                        /**请求参数*/
                        reqData: {},
                        /** 分类数组 */
                        catArr: [],
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                day_count: 1,
                                sale_rate: 0,
                                collected: 0,
                            },
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                day_count: 1,
                                sale_rate: 0,
                                collected: 0,
                            },
                        ],
                    },
                },
                {
                    // 辅助分割
                    id: 5,
                    img: "url(" + i15 + ")",
                    type_name: "auxiliary_division",
                    text: "辅助分割",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        /**高度 */
                        height: 40,
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                    },
                    style: {
                        background: "#fff",
                    },
                    data: {},
                },
                {
                    // 公告通知
                    id: 6,
                    img: "url(" + i7 + ")",
                    type_name: "notice",
                    text: "公告通知",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "border-radius": 0,
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                    },
                    style: {
                        notice_type: 1, // 公告样式，1是纯文本，2是文章列表
                        cate_id: "", // 文章分类
                        type: 1, // 公告左侧图标，1是标准，2是自定义图标
                        arrow_switch: false, // 是否显示右侧箭头
                        background: "#fffbe8", // 滚动条背景
                        color: "#ed6a0c", // 文本颜色
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: "请填写内容，内容过长时，将会在手机上滚动显示",
                        custom_icon: "", // 自定义图标
                    },
                },
                {
                    // 门店列表
                    id: 7,
                    img: "url(" + i19 + ")",
                    type_name: "shopList",
                    text: "门店列表",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 14,
                        "margin-right": 14,
                        "margin-bottom": 14,
                        "margin-top": 0,
                        "border-radius": 5,
                    },
                    style: {
                        background: "#fff",
                        color: "#333",
                        start_color: "#ffeeea",
                        head_color: "#FD7047",
                        icon_switch: false,
                    },
                    data: {
                        shop_name: "商家TOP榜",
                        custom_icon: "",
                        /**请求地址*/
                        reqUrl: "/api/supplier/items",
                        /**请求参数*/
                        reqData: { limit: 6 },
                        data: [{ title: "导航1" }, { title: "导航2" }, { title: "导航3" }, { title: "导航4" }],
                    },
                },
                {
                    // 商品搜索
                    id: 8,
                    img: "url(" + i6 + ")",
                    type_name: "search",
                    text: "商品搜索",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                    },
                    style: {
                        placeholder: "商品搜索",
                        background: "#fff", // 背景颜色
                        box_bg: "#f7f8fa", // 框体背景颜色，1是标准灰色，2是白色
                        shape: "round", // 框体样式，可选值square
                        aligen: "left", // 输入框内容对齐方式，可选值为 center right
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: "搜索商品",
                        custom_icon: "", // 自定义图标
                    },
                },
                {
                    // 图片广告
                    id: 9,
                    img: "url(" + i4 + ")",
                    type_name: "img_ad",
                    text: "图片广告",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                        "border-radius": 5,
                    },
                    style: {
                        type: 1, // 1是一行一个，2是一行两个，3是一行三个，4是一左二右
                        showSpac: false, // 图片间距，默认false
                        img_height: 375, // 图片高度，仅适用于type为4的时候
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [{ name: "", url: "", page_id: "", pageTitle: "" }],
                    },
                },
                {
                    // 实时成交
                    id: 10,
                    img: "url(" + i16 + ")",
                    type_name: "real_time_deal",
                    text: "实时成交",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                        "border-radius": 5,
                    },
                    style: {
                        tag_bg: "#FFE1C9",
                        tag_color: "#ff8051",
                        weight: 600,
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [
                            {
                                created_time: "11-07 09:32",
                                product_name: "卡罗拉",
                                level: "A",
                                buy_money: "7.00",
                                nums: 4,
                                unit: "扎",
                                seller_name: "花数云采购",
                                buyer_tel: "188****8814",
                            },
                        ],
                    },
                },
                {
                    // 交易场次
                    id: 11,
                    img: "url(" + i17 + ")",
                    type_name: "trade_session",
                    text: "交易场次",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                        "border-radius": 5,
                    },
                    style: {
                        start_color: "#E1FAF4",
                        head_color: "#00A77C",
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        /* 当没有请求地址的时候，使用data数据 */
                        trade_info: {
                            trade_name: "第一场交易中",
                            start_time: "00:00",
                            end_time: "20:00",
                            next_time: "21:00",
                            total_nums: 5000,
                            unit: "扎",
                        },
                        data: [
                            {
                                cate_id: 11,
                                cate_title: "单头玫",
                                change_rate: "6.71",
                                today_price: 28.74,
                                yesterday_price: 26.455388,
                            },
                            {
                                cate_id: 12,
                                cate_title: "多头玫",
                                change_rate: "15.87",
                                today_price: 24.13,
                                yesterday_price: 19.455388,
                            },
                            {
                                cate_id: 13,
                                cate_title: "单头康",
                                change_rate: "6.51",
                                today_price: 12.68,
                                yesterday_price: 10.455388,
                            },
                            {
                                cate_id: 14,
                                cate_title: "多头康",
                                change_rate: "6.51",
                                today_price: 12.68,
                                yesterday_price: 10.455388,
                            },
                            {
                                cate_id: 15,
                                cate_title: "非洲菊",
                                change_rate: "6.51",
                                today_price: 12.68,
                                yesterday_price: 10.455388,
                            },
                            {
                                cate_id: 16,
                                cate_title: "洋桔梗",
                                change_rate: "-6.51",
                                today_price: 12.68,
                                yesterday_price: 10.455388,
                            },
                        ],
                    },
                },
                {
                    // 标题文本
                    id: 12,
                    img: "url(" + i1 + ")",
                    type_name: "title",
                    text: "标题文本",
                    /** 需要x2转成rpx样式 */
                    rpxStyle: {
                        "margin-left": 0,
                        "margin-right": 0,
                        "margin-bottom": 0,
                        "margin-top": 0,
                        "border-radius": 0,
                    },
                    style: {
                        title_color: "#333",
                        weight: 500,
                        background: "#fff",
                        arrowSwitch: false, // 是否显示箭头
                        showMore: false,
                        showLeft: false, // 标题左边框
                        left_bottom_color: "#333",
                    },
                    data: {
                        /**请求地址*/
                        reqUrl: "",
                        /**请求参数*/
                        reqData: {},
                        title: "标题文本",
                        jump_url: {
                            pageTitle: "",
                            page_id: "",
                        },
                        data: [],
                    },
                },
                {
                    // 标签商品
                    id: 13,
                    img: "url(" + i18 + ")",
                    type_name: "tagGood",
                    text: "标签商品",
                    rpxStyle: {
                        "margin-left": 14,
                        "margin-right": 14,
                        "margin-bottom": 14,
                        "margin-top": 0,
                    },
                    style: {
                        styleType: 1, // 0 一行一个，1一行两个
                        titleMore: 1, // 1是默认一行展示，2是两行超出隐藏
                        weight: 500, // 加粗
                        showBuy: true, // 是否显示右下角购买按钮
                        showSupp: true, // 是否显示供应商信息
                        tabInitColor: "#0D0D0D", // 标签文字默认颜色
                        subColor: "#1A1A1A", // 标签文字默认颜色
                        tabActiveColor: "#0AC393", // 标签文字选中颜色
                        tabLineColor: "#ee0a24", // 标签底部条默认颜色
                        price_color: "#0ac393",
                    },
                    data: {
                        /**请求地址 用户端使用：/api/product/index*/
                        reqUrl: "/api/product/index",
                        /**请求参数*/
                        reqData: {},
                        /** 标签数组 */
                        tagArr: [],
                        tag_id: "",
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                day_count: 1,
                                sale_rate: 0,
                                collected: 0,
                            },
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                sale_rate: 0,
                            },
                        ],
                    },
                },
                {
                    // 秒杀专区
                    id: 14,
                    img: "url(" + i9 + ")",
                    type_name: "skill",
                    text: "秒杀专区",
                    rpxStyle: {
                        "margin-left": 14,
                        "margin-right": 14,
                        "margin-bottom": 14,
                        "margin-top": 0,
                        "border-radius": 5,
                    },
                    style: {
                        titleMore: 1, // 1是默认一行展示，2是两行超出隐藏
                        weight: 600, // 加粗
                        showBuy: true, // 是否显示右下角购买按钮
                        showSupp: true, // 是否显示供应商信息
                        proBg: "#FCF2ED", // 进度条轨道颜色
                        proColor: "#F8630F", // 进度条颜色
                        head_color: "#FD7047", // 头部标题颜色
                        start_color: "#FFEEEA", // 头部背景渐变开始颜色
                        price_color: "#fd7047",
                        btnRound: true, // 购买按钮是否圆角矩形
                    },
                    data: {
                        skill_name: "限时秒杀",
                        btn_name: "立即抢",
                        /**请求地址*/
                        reqUrl: "/api/product/seckill",
                        /**请求参数*/
                        reqData: {
                            limit: 6,
                        },
                        /* 当没有请求地址的时候，使用data数据 */
                        data: [
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                sale_rate: 0,
                            },
                            {
                                product_common_id: 2268,
                                cate_id: 5,
                                cate_title: "短枝玫瑰",
                                color_id: 402,
                                color: "红色",
                                product_name: "短枝玫瑰",
                                img: "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                                norm: "15枝",
                                unit: "扎",
                                cost_price: "101.00",
                                sku: 1000,
                                sales: 0,
                                supplier: {
                                    supplier_id: 4,
                                    title: "百乐花社",
                                    logo: "tenant_ad0234829205b9033196ba818f7a872b/album/202206/20220629_4af77808caeac0fc1c6a854be513c5da.jpg",
                                    province: "云南省",
                                    city: "昆明市",
                                    district: "盘龙区",
                                    addr: "云南省昆明市盘龙区",
                                    comments: 0,
                                    score: 0,
                                    tag_list: [
                                        {
                                            tag_id: 9,
                                            title: "基地",
                                            color: "#00bFFF",
                                        },
                                        {
                                            tag_id: 1,
                                            title: "种植户",
                                            color: "#006400",
                                        },
                                    ],
                                    avg_score: 5,
                                },
                                original_price: 103,
                                product_price: 103,
                                sale_rate: 0,
                            },
                        ],
                    },
                },
                {
                    id: 15,
                    img: "url(" + i11 + ")",
                    type_name: "video",
                    text: "视频容器",
                    rpxStyle: {
                        "margin-left": 14,
                        "margin-right": 14,
                        "margin-bottom": 14,
                        "margin-top": 0,
                        "border-radius": 5,
                    },
                    style: {
                        height: 240,
                    },
                    data: {
                        video_src: "",
                        video_title: "",
                        video_cover: "",
                        nonde_img:
                            "https://cdn.huashushop.com/tenant_593be52a46f869eea8b31d146d21de7a/album/202305/20230513_1e93aba6c248e3979bca2a47a1ea05f5.png!img_400",
                    },
                },
            ],
        },
    ],

    pageData: {
        title: "花数云",
        share_name: "",
        share_cover: "", // 分享封面
        /**页面样式 */
        style: {
            background: "#f7f8fa",
        },
        navBar: {
            background: "#fff",
            color: "#000",
            hidden: false,
            search_switch: false,
            title: "花数云",
            swipes_color: "#18A33F",
        },
        body: [],
    },

    /**当前设置类型 */
    setTypeIdx: 0,
    setTypeArr: ["页面设置", "顶部导航", "组件管理"],
    itemIdx: -1, // 选中的组件索引
    curItem: {}, // 当前选中的组件
})

let decorate_id = 0
onMounted(() => {
    decorate_id = route.query.id || 0
    //获取详情
    if (decorate_id) {
        proxy.$axios
            .get("decorate/detail?decorate_id=" + decorate_id)
            .then((res) => {
                // console.log("获取到的详情", res.data)
                if (res.data.code == 0) {
                    let result = res.data.data.style
                    let index = result.body.findIndex((item) => item.type_name === "swiper")
                    if (index > -1) {
                        let swipes = result.body[index].data.data
                        if (swipes[0].color) {
                            data.pageData.navBar.background = ""
                            data.pageData.navBar.swipes_color = swipes[0].color
                        }
                    }
                    data.pageData = result
                } else {
                    proxy.$message({ message: res.data.msg, type: "error" })
                }
            })
            .catch((err) => {})
    }

    //获取左边工具栏
    proxy.$axios
        .get("decorate/tool/index")
        .then((res) => {
            if (res.code) {
                proxy.$message({ message: res.msg, type: "warning" })
            } else {
                let arr = []
                let arrAll = []
                data.bars[0].listAll.map((val) => {
                    arrAll.push(val.type_name)
                })
                res.data.data.map((val1) => {
                    let i = arrAll.indexOf(val1.title_value)
                    i > -1 && arr.push(data.bars[0].listAll[i])
                })
                data.bars[0].lists = arr
            }
        })
        .catch((err) => {})
})

onBeforeUnmount(() => {})

// 获取轮播图索引
const changeSwiper = (cur) => {
    let itemArr = data.pageData.body
    let index = itemArr.findIndex((item) => item.type_name === "swiper")
    if (index > -1) {
        let swipes = itemArr[index].data.data
        if (swipes[cur].color) {
            data.pageData.navBar.background = ""
            data.pageData.navBar.swipes_color = swipes[cur].color
        }
    }
}

const item_change = (e) => {
    // console.log("组件拖动变化", e)
    // console.log("变化后的组件数据", data.pageData.body)
    let arr = (data.pageData.body = JSON.parse(JSON.stringify(data.pageData.body)))
    let obj = e.moved || e.added
    data.itemIdx = obj.newIndex
    data.curItem = arr[obj.newIndex]
    data.setTypeIdx = 2
}
/**选中要编辑的组件 */
const item_click = (index, element) => {
    data.itemIdx = index
    data.curItem = element
    data.setTypeIdx = 2
}

/**
 * 删除组件
 * @param {int} index
 */
const del_item = (index) => {
    data.pageData.body.splice(index, 1)
    setTimeout(() => {
        data.curItem = data.pageData.body[data.itemIdx] || {}
    }, 100)
}

/**
 * 二级菜单
 * @property {Number} cur 二级菜单数组下标
 * @property {Function} handleSub 菜单点击事件
 */
const cur = ref(0)
const handleSub = (item, index) => {
    cur.value = cur.value == index ? null : index
    item.is_select = !item.is_select
}

// 外链
const toWebsite = () => {
    window.open("http://www.huashuyn.com/")
}

// 返回装修首页
const toHome = () => {
    router.push("/Shop/ShopDeco")
}
/**保存页面 */
const submit_click = () => {
    // 转换样式给前端使用
    data.pageData.body.map((val) => {
        let style = ""
        for (let key in val.rpxStyle) {
            style += key + ":" + val.rpxStyle[key] * 2 + "rpx;"
        }
        for (let key in val.style) {
            style += key + ":" + val.style[key] + ";"
        }
        val.data.style = style
    })
    // console.log("提交的数据", data.pageData)
    let urls = decorate_id == 0 ? "decorate/add" : "decorate/update"
    let datas = {
        title: data.pageData.navBar.title,
        style: JSON.stringify(data.pageData),
    }
    decorate_id > 0 && (datas.decorate_id = decorate_id)
    proxy.$axios
        .post(urls, datas)
        .then((res) => {
            if (res.data.code == 0) {
                proxy.$message({ message: "保存成功", type: "success" })
                decorate_id == 0 && router.back(-1)
            } else {
                proxy.$message({ message: res.data.msg, type: "error" })
            }
        })
        .catch((err) => {})
}

// 禁止左侧菜单相互移动
// draggedContext: 被拖拽的元素
//       index: 被拖拽的元素的序号
//       element: 被拖拽的元素对应的对象
//       futureIndex: 预期位置、目标位置
// relatedContext: 将停靠的对象
//       index: 目标停靠对象的序号
//       element: 目标的元素对应的对象
//       list:  目标数组
//       component: 将停靠的vue组件对象
const onLeftMove = (e) => {
    return JSON.stringify(data.pageData.body) == JSON.stringify(e.relatedContext.list)
}

const { bars, pageData, curItem } = toRefs(data)
</script>
<script>
export default {
    name: "DecoHome",
}
</script>

<style lang="less" scoped>
.item-sel {
    &::before {
        content: "";
        position: absolute;
        width: 375px;
        height: 100%;
        left: 0px;
        top: 0;
        box-sizing: border-box;
        border: 2px solid #4b93fa;
        z-index: 110;
        cursor: move;
    }
}

.head-cont {
    &::before {
        height: 64px;
    }
}

.tool-btn-con {
    position: absolute;
    top: 0;
    right: -40px;
    width: 38px;
    background: #fff;
    box-shadow: 0 2px 8px 0 rgb(200 201 204 / 50%);
    border-radius: 2px;
    padding: 5px 0;

    .el-icon {
        cursor: pointer;

        &:hover {
            color: @themes;
        }
    }
}

.top-bar__left {
    cursor: pointer;
}

.ghost {
    width: 100% !important;
    border: 2px dashed #e6e8eb;
    border-radius: 2px;
}

.store-box {
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color: #f9f9f9;
}

.store-top-bar {
    position: fixed;
    top: 0;
    height: 54px;
    width: 100%;
    border-bottom: 1px solid #ebedf0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #fff;
    box-shadow: 0 1px 0 0 rgba(0, 0, 0, 0.1);
    padding: 0px 20px;
}

.left-bar {
    width: 75px;
    position: absolute;
    border-right: 1px solid #ebedf0;
    top: 55px;
    left: 0;
    bottom: 0;
    background-color: #fff;
}

.left-bar__one {
    cursor: pointer;
    text-align: center;
    margin: 32px auto 0;
}

.left-bar__active {
    color: #409eff;
    font-weight: 500;
}

.left-bar__help {
    position: absolute;
    bottom: 32px;
    left: 26px;
}

.letf-sub-bar {
    position: absolute;
    top: 56px;
    left: 76px;
    overflow-x: hidden;
    overflow-y: auto;
    bottom: 0;
    background: #fff;
    user-select: none;
    width: 200px;
}

.sub-bar__item {
    padding: 0px 12px;
}

.sub-bar__tab {
    margin-top: 22px;
    width: 100%;
    display: flex;
    align-items: center;
    height: 30px;
    position: relative;
    color: #555;
    cursor: pointer;
}

.sub-bar__tab-name {
    font-size: 14px;
    color: #333;
    margin-left: 8px;
}

.bar-icon {
    transition: transform 0.3s;
}

.bar-active .bar-icon {
    transform: rotateZ(90deg);
}

.sub-list {
    max-height: 2000px;
    margin: 0 auto;
    padding: 1px;
    width: 160px;
    overflow: hidden;
    transition: all 0.5s cubic-bezier(0.23, 1, 0.32, 1);
}

.sub-list__view {
    display: flex;
    flex-flow: row wrap;
    width: 100%;
}

.sub-list__item {
    width: 50%;
    text-align: center;
    height: 80px;
    font-size: 12px;
    margin-bottom: 8px;
    border-radius: 2px;
    cursor: move;
}

.i-icon {
    display: inline-block;
    margin-top: 8px;
    background-position: 0 0;
    height: 32px;
    width: 32px;
    background-size: cover;
}

.sub-list__item-text {
    font-size: 12px;
    margin-top: 6px;
    color: #666;
}

.sub-list__item:hover {
    background: #409eff;
    color: #fff;
}

.sub-list__item:hover .i-icon {
    background-position: 0 32px;
}

.sub-list__item:hover .sub-list__item-text {
    color: #fff;
}

.store-body {
    position: absolute;
    top: 56px;
    left: 262px;
    right: 376px;
    bottom: 0;
    overflow-y: auto;
    overflow-x: hidden;
    background-color: #f7f8fa;
    user-select: none;
}

.store-body-page {
    position: fixed;
    top: 128px;
    right: 407px;
    text-align: center;
    font-size: 12px;
    color: #323233;
    z-index: 1;
}

.store-body__option {
    position: relative;
    background-color: #fff;
    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
    border-radius: 2px;
    width: 94px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 12px;
    cursor: pointer;
}

.store-body__option span {
    margin-left: 4px;
}

.store-body__option-active {
    background-color: #409eff;
    color: #fff;
}

.right-editor {
    width: 376px;
    position: absolute;
    padding-bottom: 100px;
    top: 56px;
    right: 0;
    overflow-x: hidden;
    overflow-y: auto;
    bottom: 0;
    background: #fff;
    scrollbar-width: none;
    -ms-overflow-style: none;

    &::-webkit-scrollbar {
        display: none;
    }
}

.store-body__cont {
    width: 375px;
    transform: scale(1);
    margin: 70px auto;
}

.content {
    position: relative;
    width: 375px;
    margin: 0 auto;
    min-height: 604px;
    user-select: none;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
}

.content-deco {
    position: relative;
    min-height: 540px;

    &::-webkit-scrollbar {
        display: none;
        width: 0 !important;
        -ms-overflow-style: none;
    }
}

.store-footer {
    min-height: 1px;
    text-align: center;
    line-height: 16px;
    background-color: #f8f8f8;
    width: 375px;
    margin: 0 auto;
    box-shadow: 0 0 14px 0 rgba(0, 0, 0, 0.1);
}

.copyright {
    background-color: #fff;
    position: relative;
    color: #999;
    text-align: center;
}

.ft-copyright {
    padding: 20px 16px 10px;
    text-align: center;
    cursor: pointer;
}

.ft-copyright img {
    width: 50px;
}

.ft-copyright p {
    font-size: 12px;
    color: #bfbfc3;
    padding: 6px 0px 10px;
}

/* 设置滚动条的样式 */
::-webkit-scrollbar {
    width: 6px;
    height: 1px;
}

/* 滚动槽 */
::-webkit-scrollbar-track {
    border-radius: 10px;
    background: #f1f1f1;
}

/* 滚动条滑块 */
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    background: @gray-4;
}
</style>
